import React, { useState } from 'react';
import { Select,Row, Col,Input,AutoComplete,Card,Button, Form } from 'antd';
const FormItem = Form.Item;


class SelectInput extends React.Component{
    
    render() {
        const { getFieldDecorator } = this.props.form;
        const FormItemLayout  = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        }
        function handleChange(value) {
            console.log(`selected ${value}`);
        }

        function onChange(value) {
        console.log(`selected ${value}`);
        }

        function onBlur() {
        console.log('blur');
        }

        function onFocus() {
        console.log('focus');
        }

        function onSearch(val) {
        console.log('search:', val);
        }

        const { Option } = Select;
        
        return (
            <div>
                <Form>
                    <Row>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="服务名称" {...FormItemLayout}>
                                {
                                    getFieldDecorator('resourcesName',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Input style={{ width: 121   }} placeholder="请输入服务名称" />
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="服务类型" {...FormItemLayout}>
                                {
                                    getFieldDecorator('resourcesType',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select placeholder="请选择服务类型" style={{ width: 120 }} onChange={handleChange}>
                                        <Option value="1">揽收</Option>
                                        <Option value="2">空运</Option>
                                        <Option value="3">提货</Option>
                                        <Option value="4">派送</Option>
                                    </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 铺" {...FormItemLayout}>
                                {
                                    getFieldDecorator('shopName',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select
                                            showSearch
                                            style={{ width: 121 }}
                                            placeholder="请选择店铺"
                                            optionFilterProp="children"
                                            onChange={onChange}
                                            onFocus={onFocus}
                                            onBlur={onBlur}
                                            onSearch={onSearch}
                                            filterOption={(input, option) =>
                                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        >
                                            <Option value="店铺一">店铺一</Option>
                                            <Option value="店铺二">店铺二</Option>
                                            <Option value="店铺三">店铺三</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="机场服务" {...FormItemLayout}>
                                {
                                    getFieldDecorator('serviceAirport',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select
                                            showSearch
                                            style={{ width: 121 }}
                                            placeholder="请选择服务机场"
                                            optionFilterProp="children"
                                            onChange={onChange}
                                            onFocus={onFocus}
                                            onBlur={onBlur}
                                            onSearch={onSearch}
                                            filterOption={(input, option) =>
                                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        >
                                            <Option value="虹桥机场">虹桥机场</Option>
                                            <Option value="浦东机场">浦东机场</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col  xl={6} md={12} sm={24}>
                        <FormItem label="特殊服务" {...FormItemLayout}>
                                {
                                    getFieldDecorator('specialService',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select style={{ width: 120 }} onChange={handleChange}>
                                            <Option value="1">普通</Option>
                                            <Option value="2">加急</Option>
                                            <Option value="3">特快</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="车辆类型" {...FormItemLayout}>
                                {
                                    getFieldDecorator('vehicleType',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select style={{ width: 120 }} onChange={handleChange}>
                                            <Option value="1">常规</Option>
                                            <Option value="2">冷链</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="运输类型" {...FormItemLayout}>
                                {
                                    getFieldDecorator('transportType',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select style={{ width: 120 }} onChange={handleChange}>
                                            <Option value="1">零担</Option>
                                            <Option value="2">专车</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={6} md={12} sm={24}>
                            <FormItem label="服务状态" {...FormItemLayout}>
                                {
                                    getFieldDecorator('supplierApplyStatus',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select style={{ width: 120 }} onChange={handleChange}>
                                            <Option value="1">待处理</Option>
                                            <Option value="2">已处理</Option>
                                            <Option value="3">已拒绝</Option>
                                            <Option value="4">被打回</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col xl={6} md={12} sm={24} style={{float: "right", marginBottom: 10}}>
                            <Button type="primary" icon="search" style={{ marginRight: 55 }}>搜索</Button>
                            <Button type="default" icon="redo">重置</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}
export default Form.create()(SelectInput);